<template>
  <div class="all">
    <div class="register-all">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="text-box1">在同一个地方，构思、设计、协作，让你的团队更加高效。</div>
      <div class="text-box2">
        <div>
          <i class="el-icon-circle-check"></i>
          <span>永久免费</span>
        </div>
        <div>
          <i class="el-icon-circle-check"></i>
          <span>实时在线</span>
        </div>
        <div>
          <i class="el-icon-circle-check"></i>
          <span>原型/设计/开发</span>
        </div>
      </div>


      <img src="./assets/login/img2.png">


      <el-form :model="regForm" :rules="regFormRules" ref="regFormRef" label-width="150px" class="form-box">
        <div class="reg-title">REGISTER</div>

        <el-form-item prop="username" class="username-item">
          <el-input v-model="regForm.username"
                    placeholder="用户名"
                    class="username"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
        </el-form-item>

        <el-form-item prop="trueName" class="realName-item">
          <el-input v-model="regForm.trueName"
                    placeholder="真实姓名"
                    class="realName"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
        </el-form-item>

        <el-form-item prop="email" class="email-item">
          <el-input v-model="regForm.email"
                    placeholder="邮箱"
                    class="email"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
        </el-form-item>

        <el-form-item prop="proof" class="proof-item">
          <el-input v-model="regForm.proof"
                    placeholder="验证码"
                    class="proof"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
          <el-button @click="getCode" class="proof-button">获取验证码</el-button>
        </el-form-item>

        <el-form-item prop="password1" class="password1-item">
          <el-input v-model="regForm.password1"
                    type="password"
                    placeholder="密码"
                    class="password1"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
        </el-form-item>

        <el-form-item prop="password2" class="password2-item">
          <el-input v-model="regForm.password2"
                    type="password"
                    placeholder="确认密码"
                    class="password2"
                    autocomplete="off"
                    @keyup.enter.native="register('regForm')"></el-input>
        </el-form-item>

          <el-button @click="register('regForm')" class="reg-button">注册</el-button>
        <div class="returnHome" @click="returnHome">返回首页</div>
        <div class="goLogin" @click="goLogin">已有账号？去登录</div>
      </el-form>
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    var checkName = (rule, value, callback) => {
      const reg = /^([\u4e00-\u9fa5]{2,8})$/;
      if (!value  || value === '') {
        callback(new Error('姓名不能为空'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入汉字'))
      } else {
        callback();
      }
    };
    var checkUsername = (rule, value, callback) => {
      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
      if (!value  || value === '') {
        callback(new Error('用户名不能为空'));
      } else if (!reg.test(value)) {
        callback(new Error('用户名由中英文、数字或下划线组成'))
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (!value  || value === '') {
        return callback(new Error('邮箱不能为空'));
      } else {
        var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(value)) {
          callback(new Error('请输入有效的邮箱'));
        } else {
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value  || value === '') {
        callback(new Error('请输入密码'));
      } else {
        var reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
        if (!reg_pwd.test(value)) {
          callback(new Error('密码8-18位,需含字母、数字'));
        } else {
          if (this.regForm.password2 !== '') {
            this.$refs.regForm.validateField('password2');
          }
          callback();
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (!value  || value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regForm.password1) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (!value  || value === '') {
        return callback(new Error('请输入验证码'));
      } else {
        callback();
      }
    };
    return {
      //注册表单绑定的数据
      regForm:{
        username: '',
        trueName: '',
        email: '',
        proof: '',
        password1: '',
        password2: ''
      },

      //输入的规则
      regFormRules:{
        username:[
          {validator: checkUsername, trigger: 'blur'}
        ],
        trueName: [
          {validator: checkName, trigger: 'blur'}
        ],
        email:[
          {validator: checkEmail, trigger: 'blur'}
        ],
        proof:[
          {validator: checkCode, trigger: 'blur'}
        ],
        password1:[
          {validator: validatePass, trigger: 'blur'}
        ],
        password2:[
          {validator: validatePass2, trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    getCode(){
      const self = this;
      const formData = new FormData();
      formData.append("userName", self.regForm.username);
      formData.append("userEmail", self.regForm.email);
      this.$axios({
        method: 'post',
        url: '/user/vertificate',
        data: formData
      }).then(res =>{
        console.log(res);
        if(res.data.errno == 0){
          this.$message.success("验证码已发送至您的邮箱");
        }else{
          this.$message.error(res.data.msg);
        }
      }).catch(err=>{
        console.log(err)
      })
    },

    register: function (formName) {
      const self = this;
      const formData = new FormData();
      formData.append("userName", self.regForm.username);
      formData.append("userEmail", self.regForm.email);
      formData.append("userPassword", self.regForm.password1);
      formData.append("code", self.regForm.proof);
      formData.append("trueName", self.regForm.trueName);
          self.$axios({
            method: 'post',
            url: '/user/register',
            data: formData,
          })
            .then(res => {
              console.log(res);
              console.log(res.data.errno);
              if(res.data.errno==0) {
                this.$message.success('注册成功！');
                setTimeout(() => {
                  this.$router.push('/user/login');
                }, 1500);
              }
              else {
                  this.$message.error(res.data.msg);                               }
            })
            .catch(err => {
              console.log(err);
            });
    },
    returnHome() {
      this.$router.push('/program/show');
    },

    goLogin() {
      this.$router.push('/user/login');
    }
  }
}
</script>

<style scoped>
.all {
  position: relative;

  width: 100%;
  height: 100vh;
  background: url("./assets/login/bgi.png") center center no-repeat;
  background-size: 100% 100%;
}

.register-all {
  position: absolute;
  /*left: 96px;*/
  /*top: 85px;*/
  left: 152px;
  top: 85px;

  /*width: 1378px;*/
  /*height: 794px;*/
  width: 1140px;
  height: 624px;

  border: 1px solid #BBBBBB;
  background-color: #fff;
}

.box1 {
  position: absolute;

  width: 182px;
  height: 61px;
  background-color: #6D7190;
  border: 1px solid #BBBBBB;
}

.box2 {
  position: absolute;
  left: 183px;

  width: 94px;
  height: 34px;
  background-color: rgba(145, 171, 201, 0.36);
  border: 1px solid #BBBBBB;
}

.text-box1 {
  position: absolute;
  left: 100px;
  top: 105px;

  font-size: 20px;
  font-weight: bold;
  color: rgba(113, 112, 112, 0.83);
  line-height: 30px;
}

.text-box2 {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 100px;
  top: 153px;

  width: 390px;
  font-size: 16px;
  color: rgb(170, 170, 170);
  line-height: 24px;
}

img {
  position: absolute;
  left: 110px;
  top: 195px;

  width: 476px;
  height: 381px;
}

.form-box {
  position: absolute;
  left: 720px;
  top: 50px;

  width: 294px;
  height: 518px;
  /*background-color: #42b983;*/

  font-size: 24px;
  color: rgba(113, 112, 112, 0.83);
}

.reg-title {
  font-size: 40px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  color: rgba(16, 16, 16, 0.78);
}

.username /deep/ .el-input__inner,
.realName /deep/ .el-input__inner,
.email /deep/ .el-input__inner,
.proof /deep/ .el-input__inner,
.password1 /deep/ .el-input__inner,
.password2 /deep/ .el-input__inner{
  position: absolute;
  height: 38px;

  border-radius: 8px;
  border: 2px solid #DCDCDC;

  text-align: left;
  text-indent: 20px;
  font-size: 15px;
  color: rgba(79, 88, 107, 0.62);

  outline: none;
}

.username /deep/ .el-input__inner,
.realName /deep/ .el-input__inner,
.email /deep/ .el-input__inner,
.password1 /deep/ .el-input__inner,
.password2 /deep/ .el-input__inner{
  /*left: 0;*/
  /*top: 130px;*/
  top: -20px;

  width: 290px;
  height: 38px;
}

.proof /deep/ .el-input__inner{
  /*left: 0;*/
  /*top: 250px;*/
  top: -20px;

  width: 180px;
  height: 38px;
}

/deep/ .el-form-item__content {
  margin-left: 0 !important;
}

.el-form-item {
  margin-top: 20px;
  margin-bottom: 15px;
}

.form-box .proof-button {
  position: absolute;
  left: 180px;
  top: 6px;

  width: 110px;
  height: 37px;
  background-color: rgba(206,206,206,0.5);;
  border-radius: 4px;
  border: 1px solid #BBBBBB;

  font-size: 14px;
  color: rgb(16, 16, 16);

  outline: none;
  cursor: pointer;
}

.form-box .reg-button {
  position: absolute;
  left: 0;
  top: 440px;

  width: 294px;
  height: 52px;
  background-color: #DDE2F1;
  border-radius: 40px;
  border: 1px solid #BBBBBB;

  font-size: 20px;
  color: rgba(79, 88, 107, 0.62);

  outline: none;
  cursor: pointer;
}

.returnHome {
  position: absolute;
  left: 10px;
  top: 510px;

  font-size: 14px;
  color: rgba(16, 16, 16, 0.78);
  cursor: pointer;
}

.returnHome:hover {
  color: #138AFF;
}

.goLogin {
  position: absolute;
  left: 173px;
  top: 510px;

  font-size: 14px;
  color: rgba(16, 16, 16, 0.82);
  cursor: pointer;
}

.goLogin:hover {
  color: #138AFF;
}

.circle1 {
  position: absolute;
  left: 580px;
  top: 40px;

  width: 32px;
  height: 32px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(223, 172, 129, 0.46);
}

.circle2 {
  position: absolute;
  left: 125px;
  top: 580px;

  width: 52px;
  height: 52px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(103, 146, 198, 0.62);
}

.circle3 {
  position: absolute;
  left: 190px;
  top: 690px;

  width: 32px;
  height: 32px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(79, 88, 107, 0.62);
}

.circle4 {
  position: absolute;
  left: 450px;
  top: 675px;

  width: 75px;
  height: 75px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(249, 239, 230, 0.34);
}
</style>
